@charset "UTF-8";
/* CSS Document */
/*初始化*/
body,
div,
span,
ul,
li,
p,
input,
h1,
h2,
h3,
h4,
img,
a,
title
 {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
}
html,body{ width:100%; }
body{ 	
	max-width:640px; 
	overflow-y:scroll;
	font-family:Helvetica, STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial; 
	margin:0 auto; 
	font-size:1.4rem;}
a {
  color: #0076cc;
}

@media (min-width: 375px) {
  html {
    font-size: 12px;
  }
}

@media (min-width: 414px) {
  html {
    font-size: 14px
  }
}
.header{ padding:0 1.4rem;}
.header h2{ font-size:2.4rem; line-height:2.6rem; color:#4A4A4A; font-weight:bold; display:inline-block; padding:1.6rem 0;}
.support { text-align: center; font-size:0.8rem; color:#9B9B9B;line-height: 3rem;}
.header .attention{ font-size:1.5rem; padding-left:1.2rem; position:relative;}
.header .attention::before{ content:""; position:absolute; width:0.6rem; height:0.6rem; border-radius:50%; background:#ccc; left:0; top:0.4rem;}

.qrcode_btn{ margin-top:1rem; padding:0.6rem 1.4rem; padding-right:2rem; color:#0076cc; display:inline-block; background:url(../images/open_icon.png) no-repeat right bottom; background-size:2rem;}
.open{ background:url(../images/open_icon.png) no-repeat right top; background-size:2rem;}

.qrcode_box{ overflow:hidden; background:#eee; height:0; transition:all 0.4s; position:relative;}
.qrcode_box_show{ height:10rem;}
.qrcode_box .qrcode_pic img, .qrcode_box .qrcode_pic canvas{ position:absolute; width:8rem; left:1.4rem; top:1rem;}

.qrcode_box .step{ margin-left:10.6rem; height:12rem; }
.qrcode_box .step p{ padding-top:1rem; padding-right:1.4rem; text-align:left; font-size:1.2rem; color:#9B9B9B; line-height:1.4rem;}
.qrcode_box .step_detail{ color:#0076cc; height:5rem; line-height:5rem;}
.step_detail img{ height:5rem;}
.step_detail>*{ float:left;}
.step_detail img:first-of-type{ margin-right:2%;}

/*app列表框*/
.app_wrapper{ width:100%; position:relative; overflow-x:hidden; }
.platform_wrapper{ width:100%; height:auto;  box-sizing:border-box; padding:0 1.4rem; border-top:1px solid #ccc; margin-top:1rem; background:#fff; }
.platform_title {color: #0076cc;}
.selected_title {color: darkgray;}
.platform_wrapper>span{ padding:0.6rem 0.6rem;display: flex; display: -webkit-flex; justify-content: space-around; padding-bottom:0; font-size:2rem; position:relative;}
.platform_wrapper>li{ width:100%; padding-top:0.8rem; padding-bottom:0.8rem; border-bottom:1px solid #ccc;}
.platform_wrapper .app_info{ padding: 0.5rem 0rem; height:5.4rem;}
.platform_wrapper img{ float:left; width:5.4rem; height:5.4rem; margin-right:0.8rem; border:1px solid #ccc; border-radius:20%; box-sizing:border-box;}

.info_box{max-width:50%; height: 100%; float:left; padding-top:0.2rem;}
.info_box span{ color:#aaa; padding-right:0.2rem; font-size:1rem; }
.platform_wrapper .down_btn{ float:right; width:5rem; height:2.6rem; margin:1.4rem 0; font-size:1.2rem;  border:0.12rem solid #0076cc; border-radius:0.4rem; outline:none;  background:#fff; color:#0076cc; text-align:center; line-height:2.6rem;}

.changelog {display: block;overflow:hidden; text-overflow:ellipsis; }
.moreAppButton {width:100%;padding: 0.3rem; margin-top: 10px; margin-bottom: 10px; text-align: center;font-size:1.2rem;background-color:lightgray; border-radius:0.4rem;color:#989898;width: 100%; height: 2rem;line-height: 2rem;}